<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSSH</title>
    <link rel="stylesheet" href="/static/xterm/xterm.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/xterm/xterm.js"></script>
    <script src="/static/xterm/xterm-addon-fit.js"></script>
    <style>
        body {
            background-color: #0c0c0c;
        }

        .terminal-window {
            background-color: #2f4050;
            width: 100%;
            height: 100%;
            color: white;
            line-height: 25px;
            margin-bottom: 10px;
            font-size: 18px;
            padding: 10px
        }
    </style>
</head>
<body>
<form class="layui-form terminal-window" >
    <div class="layui-inline">
        <label class="layui-form-label" style="color: white">container</label>
        <div class="layui-input-block layui-form">
            <select name='pod_ssh' id='container_ssh' lay-filter="container_ssh" lay-skin="notepad"></select>
        </div>
    </div>
</form>
<div id="terminal"></div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        const form = layui.form
            , $ = layui.jquery;

        // select 动态获取内容 设置这里的变量要添加引号
        const namespace = "{{ namespace }}"
        const name = "{{ name }}"

        // websocket 处理函数独立出来，方便多次调用
        function sshWebsocket(data) {
            const term = new Terminal({cursorBlink: true});
            const ws = new WebSocket("ws://" + window.location.host + "/ws/ssh/" + namespace + '/' + name + '/' + data + '/' + term.rows + '/' + term.cols);
            // xterm fit 组件，可以控制窗口大小
            const fitAddon = new window.FitAddon.FitAddon();
            term.loadAddon(fitAddon);
            ws.onopen = function () {
                // 新链接，清空div里的内容，之后打开term
                document.getElementById("terminal").innerText = ""
                term.open(document.getElementById('terminal'));
                term.onData(function (data) {
                    ws.send(data);
                })
                fitAddon.fit();
            };
            ws.onmessage = function (evt) {
                // 将后端返回数据写入前端页面
                term.write(evt.data);
            };
            ws.onclose = function () {
                term.write('\n\r\x1B[1;3;31m连接被关闭，请检查容器是否正常运行！\x1B[0m');
            };
            ws.onerror = function (event) {
                console.log('error:' + event);
            };
        }

        $.ajax({
            url: '{% url "container_api" %}?namespace=' + namespace + '&name=' + name,
            type: "GET",
            async: false,
            success: function (res) {
                let container_select = $("#container_ssh")
                if (res.code === 0) {
                    //遍历数据,添加到select选项中
                    $.each(res.data, function (index) {
                        container_select.append('<option value=' + res.data[index] + '>' + res.data[index] + '</option>')
                    })
                    form.render()
                    sshWebsocket(res.data[0])
                }
            },
            error: function (res) {
                layer.msg("服务器接口异常")
            }
        })

        form.on('select(container_ssh)', function (data) {
            console.log('select')
            sshWebsocket(data.value)
        })
    })
</script>
</body>
</html>